<template>
  <div class="childContainer">
    <div class="timeQuerySection">
      <el-time-picker
        v-model="queryTime"
        is-range
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      ></el-time-picker>
    </div>
    <div class="commonSection">
      <div class="sectionTitle">最终利润</div>
      <div class="sectionMainBody">
        <div class="totalInfo">
          <span class="bigLabel" style="color: #3758ff">{{ finalProfit }}</span>
          <span class="smallLabel">最终利润</span>
        </div>
        <div class="categoryInfo">
          <div class="categoryInfoItem">
            <div class="value">{{ profitData.CommodityProfit }}</div>
            <div class="name">商品利润</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ profitData.freight }}</div>
            <div class="name">运费</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ profitData.wages }}</div>
            <div class="name">员工工资</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ profitData.serviceCharge }}</div>
            <div class="name">手续费</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ profitData.discount }}</div>
            <div class="name">优惠金额</div>
          </div>
        </div>
      </div>
    </div>
    <div class="commonSection">
      <div class="sectionTitle">支付方式</div>
      <div class="sectionMainBody">
        <div class="totalInfo">
          <span class="bigLabel" style="color: #ff9502">{{ finalIncome }}</span>
          <span class="smallLabel">合计收款</span>
        </div>
        <div class="categoryInfo">
          <div class="categoryInfoItem">
            <div class="value">{{ paymentData.alipay }}</div>
            <div class="name">支付宝</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ paymentData.wechat }}</div>
            <div class="name">微信</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ paymentData.membership }}</div>
            <div class="name">会员卡</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ paymentData.pos }}</div>
            <div class="name">刷卡</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ paymentData.bankCard }}</div>
            <div class="name">银行转账</div>
          </div>
          <div class="categoryInfoItem">
            <div class="value">{{ paymentData.cash }}</div>
            <div class="name">现金</div>
          </div>
        </div>
      </div>
    </div>
    <div class="commonSectionNoBorder">
      <div class="deliveMethodBlock">
        <div class="methodBlockTop">送货上门</div>
        <div class="methodBlockBottom">
          <div class="methodBlockBottomLeft">
            <span
              style="
                font-weight: bold;
                font-size: 18px;
                color: #1eb0f7;
                margin-right: 10px;
              "
              >10</span
            >单
          </div>
          <div class="methodBlockBottomLeft">
            <span
              style="
                font-weight: bold;
                font-size: 18px;
                color: #1eb0f7;
                margin-right: 10px;
              "
              >600</span
            >块钱
          </div>
        </div>
      </div>
      <div class="deliveMethodBlock">
        <div class="methodBlockTop">到店自取</div>
        <div class="methodBlockBottom">
          <div class="methodBlockBottomLeft">
            <span
              style="
                font-weight: bold;
                font-size: 18px;
                color: #ffbc03;
                margin-right: 10px;
              "
              >10</span
            >单
          </div>
          <div class="methodBlockBottomLeft">
            <span
              style="
                font-weight: bold;
                font-size: 18px;
                color: #ffbc03;
                margin-right: 10px;
              "
              >600</span
            >块钱
          </div>
        </div>
      </div>
    </div>

    <div class="tableSection">
      <div class="tableTitle">销售类别</div>
      <div class="tableContent">
        <el-table :data="SalesCategoryData">
          <el-table-column prop="categoryName" label="类别" width="180" />
          <el-table-column prop="count" label="数量" width="180" />
          <el-table-column prop="salesValue" label="销售额" />
          <el-table-column prop="profit" label="利润" />
          <el-table-column prop="profitRatio" label="利润率">
            <template #default="scope">
              {{
                ((scope.row.profit / scope.row.salesValue) * 100) % 100 > 0
                  ? ((scope.row.profit / scope.row.salesValue) * 100).toFixed(2)
                  : (scope.row.profit / scope.row.salesValue) * 100
              }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import useProfitData from "@/hooks/useProfitInfo";
import usePaymentInfo from "@/hooks/usePaymentInfo";
import useSalesCategory from "@/hooks/useSalesCategory";

const queryTime = ref([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
]);

const { profitData } = useProfitData();
const { paymentData } = usePaymentInfo();
const { SalesCategoryData } = useSalesCategory();

console.log("SalesCategoryData", SalesCategoryData);

const finalIncome = computed(() => {
  return (
    paymentData.value.alipay +
    paymentData.value.wechat +
    paymentData.value.bankCard +
    paymentData.value.pos +
    paymentData.value.cash +
    paymentData.value.membership
  );
});

const finalProfit = computed(() => {
  return (
    profitData.value.CommodityProfit +
    profitData.value.freight +
    profitData.value.discount +
    profitData.value.serviceCharge +
    profitData.value.wages
  );
});
</script>

<style lang="less" scoped>
.childContainer {
  width: 100%;
  .timeQuerySection {
    height: 50px;
    margin-bottom: 40px;
  }
  .commonSection {
    border: 1px solid #ddd;
    margin-bottom: 40px;
  }
  .tableSection {
    .tableTitle {
      margin-bottom: 16px;
      color: #aaa;
      font-size: 20px;
    }
  }
  .commonSectionNoBorder {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    .deliveMethodBlock {
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .methodBlockTop {
        color: #101010;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .methodBlockBottom {
        display: flex;
        div {
          flex: 1;
        }
      }
      height: 160px;
      border: 1px solid #ddd;
      flex: 1;
      &:first-child {
        margin-right: 20px;
      }
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .sectionTitle {
    height: 60px;
    padding-left: 20px;
    color: #aaa;
    line-height: 60px;
    border-bottom: 1px solid #ddd;
  }
  .sectionMainBody {
    padding: 30px;
    .totalInfo {
      margin-bottom: 30px;
      .bigLabel {
        font-size: 40px;
        font-weight: bold;
      }
      .smallLabel {
        font-size: 24px;
        color: #777;
        margin-left: 20px;
      }
    }

    .categoryInfo {
      display: flex;
      .categoryInfoItem {
        flex: 1;
        .value {
          color: #101010;
          margin-bottom: 10px;
          font-weight: bold;
          font-size: 18px;
        }
        .name {
          color: #9090a2;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
